<template>
    <div class="location">
        <van-search placeholder="请输入搜索关键词" v-model="address"  @search="onSearch"/>
        <div ref="map1" class="map"></div>
	    <div class="list">
            <div class="list_btn">
                <div class="cancel">取消</div>
                <div class="confirm">确认</div>
            </div>
            <div class="address_list" ref="addressList">
                <input type="text" placeholder="找不到地址，填入即可" class="address_input">
                <van-radio-group v-model="radio">
                    <van-cell-group>
                        <van-cell :title="item" clickable @click="radio =item" v-for="(item,index) of searchList" :key="index">
                        <van-radio :name="item" />
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>
        </div>
    </div>
</template>
<script>
import { Search } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { setTimeout } from 'timers';
export default {
    data() {
        return {
            address:'',
            searchList:[],
            pt:'',//经纬度
            radio:'',
            street:'公司',
            page:0//检索的页数
        }
    },
    methods: {
        onSearch(){
            const _this=this
            this.page=0;
            this.searchList=[]
            var map = new BMap.Map(this.$refs.map1);
            var myGeo = new BMap.Geocoder();
            // 将地址解析结果显示在地图上,并调整地图视野
            myGeo.getPoint(_this.address, function(point){
                if (point) {
                    _this.pt=point
                    console.log(point)
                    _this.createMap()

                }else{
                    alert("您选择地址没有解析到结果!");
                }
            },'广东');
        },
        createMap(){
            const _this=this
            const map1=this.$refs.map1
            var map = new BMap.Map(map1);            // 创建Map实例
            var mPoint = new BMap.Point(_this.pt.lng, _this.pt.lat);
            map.centerAndZoom(_this.pt, 20);
            var options = {
		onSearchComplete: function(results){
			// 判断状态是否正确
			if (local.getStatus() == BMAP_STATUS_SUCCESS){
				var s = [];
				for (var i = 0; i < results.getCurrentNumPois(); i ++){
					s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                }
                const arr= _this.searchList
                _this.searchList=[...arr,...s]
            }
           
        },
        pageCapacity: 20
    };      
    
            var local = new BMap.LocalSearch('广州市', options);
             map.addOverlay(new BMap.Marker(_this.pt));
            _this.$local=local
            // setTimeout(()=>{
            //     console.log(111)
            //     local.gotoPage(2)
            // },5000)
            // var local = new BMap.LocalSearch("广州市",   
            // {renderOptions:options,pageCapacity: 8});      
                // local.search(this.address);
                if(this.address==''){
                    local.searchNearby('公司',mPoint,1000);
                }
                local.searchNearby(this.address,mPoint,1000);
        },
        async initMap() {

        let _this=this;
        let areaKey=''
        let geolocation = new BMap.Geolocation();  
        let gc = new BMap.Geocoder(); 
        await geolocation.getCurrentPosition( (r)=>{
            let pt = r.point; //获取当前ip的经纬度 
            this.pt=pt
            this.createMap()
        })
        },
        getMore(){
            if(this.$refs.addressList.scrollTop>=200){
                this.page++;
                this.$local.gotoPage(this.page)
            }
            
        },
        debounce(fun,delay=200){
            let timer=null;
            return function(...args){
                timer && clearTimeout(timer);
                timer=setTimeout(()=>{
                fun.apply(this,args);
                },delay)
            }
            }
    },
    mounted() {
        // 百度地图API功能
        this.initMap()
        // this.createMap()
        var _this=this
        this.$refs.addressList.addEventListener('scroll',
            _this.debounce(_this.getMore)
           
        )
    },
}
</script>
<style scoped>
    .location{
        width: 100%;
        height: 100vh;
    }
    .map{
        width: 100%;
        height: 300px;
    }
    .list{
        position: relative;
        width: 100%;
        height: calc(100% - 300px);
        overflow: hidden;
        
    }
    .address_list{
        width: 100%;
        overflow-y: scroll;
        height: calc(100vh - 330px);
    }
    .address_input{
        margin-left:20px;
        height: 30px;
        border:none;
        width: calc(100% - 40px);
    }
    .list_btn{
        display: flex;
        justify-content: space-between;
        padding:10px 0;
        /* position: absolute;
        top:0px;
        z-index:99;
        width: 100%;
        background: #fff;
        height: 30px; */
    }
    .list_btn .cancel{
        margin-left:20px;
    }
    .list_btn .confirm{
        margin-right:20px; 
        color:#fff;
        padding:4px 7px;
        background: rgb(52,198,88);

    }
</style>
<style >
    .van-cell__title{
        flex:4;
    }
</style>

